import { FC, useEffect, useState } from 'react';
import { Button, DatePicker, Form, Input, Radio, InputNumber } from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
import { CityComponent } from './components/cityComponents';
import { SelectMore } from '@src/components/selectMore';

export const AntdForm: FC = () => {
  const [form] = Form.useForm();
  const [currentTime, setCurrentTime] = useState<any>(new Date().toLocaleTimeString());
  const [selectMoreValue, setSelectMoreValue] = useState<any[]>(['BZ-ZLB-SC-30D-C&S&B']);
  useEffect(() => {
    console.log(selectMoreValue);
  }, []);
  const [optionList] = useState<any>([
    {
      id: 3613,
      code: 'BZ-ZLB-SC-30D-C&S&B',
      name: '商城-服饰鞋类箱包等日用品30天质保险',
      type: 6,
      parentId: 100,
      liabilityOptional: null,
    },
    {
      id: 3592,
      code: 'BZ-GMWY-SC-90D-HZP',
      name: '商城-过敏无忧',
      type: 6,
      parentId: 101,
      liabilityOptional: null,
    },
    {
      id: 3608,
      code: 'BZ-POP30365-SC-30/365D-ZDSP',
      name: '商城POP店-30365产品',
      type: 6,
      parentId: 101,
      liabilityOptional: null,
    },
    {
      id: 3621,
      code: 'BZX-FG-LS-15M-MP-2C-20200515',
      name: '上海率盛-2C手机复购消保履约保证15个月',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3622,
      code: 'BZX-FG-LS-15M-MP-2C-BG-20200515',
      name: '上海率盛-2C手机复购消保履约保证15个月（补购）',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3623,
      code: 'BZX-FG-LS-1Y-HVMP- 2C-20200311',
      name: '上海率盛-2C高价值手机复购消保履约保证1年',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3626,
      code: 'BZX-XFZLY-JDJK-48H-Medicine-LQHX',
      name: '京东健康京东大药房药品无忧保险（临期换新）',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3629,
      code: 'BZX-XFZLY-JDSC-3M-KQYP',
      name: '爱牙无忧消费者保障服务协议履约保证保险',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3630,
      code: 'BZX-XFZLY-JDSC-POPJBX-15D',
      name: '京东商城POP商家价保险15天',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3631,
      code: 'BZX-XFZLY-JDSC-POPJBX-15DZX',
      name: '京东商城POP商家价保险15天赠险',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3632,
      code: 'BZX-XFZLY-JDSC-POPJBX-30D',
      name: '京东商城POP商家价保险30天',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3633,
      code: 'BZX-XFZLY-JDSC-POPJBX-30DZX',
      name: '京东商城POP商家价保险30天赠险',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3634,
      code: 'BZX-XFZLY-JDSC-POPJBX-7D',
      name: '京东商城POP商家价保险7天',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3635,
      code: 'BZX-XFZLY-JDSC-POPJBX-7DZX',
      name: '京东商城POP商家价保险7天赠险',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 12320,
      code: 'ZRX-YWHX-LS-90D-BAG-2B-20200608',
      name: '上海率盛-2B书包90天意外换新',
      type: 6,
      parentId: 102,
      liabilityOptional: null,
    },
    {
      id: 3610,
      code: 'BZ-XFZLY-SC-15D-QCPJAZ',
      name: '汽车配件安装计划（商城）',
      type: 6,
      parentId: 103,
      liabilityOptional: null,
    },
    {
      id: 3611,
      code: 'BZ-XFZLY-SC-30D-QCPJAZ',
      name: '汽车配件安装计划（商城 30天）',
      type: 6,
      parentId: 103,
      liabilityOptional: null,
    },
    {
      id: 3584,
      code: 'BZ-GJWY-SC-48H-FPJ',
      name: '商城-购酒无忧-非啤酒',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3585,
      code: 'BZ-GJWY-SC-48H-PJ',
      name: '商城-购酒无忧-啤酒',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3586,
      code: 'BZ-GJWYFBP-SC-12M-10000',
      name: '商城-购酒无忧FBP-10000',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3587,
      code: 'BZ-GJWYFBP-SC-12M-2000',
      name: '商城-购酒无忧FBP-2000',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3588,
      code: 'BZ-GJWYFBP-SC-12M-30000',
      name: '商城-购酒无忧FBP-30000',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3589,
      code: 'BZ-GJWYFBP-SC-12M-500',
      name: '商城-购酒无忧FBP-500',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3590,
      code: 'BZ-GJWYFBP-SC-12M-5000',
      name: '商城-购酒无忧FBP-5000',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3591,
      code: 'BZ-GJWYFBP-SC-90D-17500',
      name: '商城-购酒无忧FBP-17500',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3624,
      code: 'BZX-XBLYZP-JDSCZPBZ-QPL-20210122',
      name: '京东商城正品保证保险',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3625,
      code: 'BZX-XFZLY-JDJK-12M-Medicine-ZPBZ',
      name: '京东健康京东大药房药品无忧保险（正品保证）',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3636,
      code: 'BZX-XFZLY-JX-6M-ZFYP-PDLZP',
      name: '京喜政府优品正品保证/产责',
      type: 6,
      parentId: 104,
      liabilityOptional: null,
    },
    {
      id: 3607,
      code: 'BZ-LYBZX-JD-15D-FLOWER-2C',
      name: '京东商城-鲜花险-15天-2C',
      type: 6,
      parentId: 105,
      liabilityOptional: null,
    },
  ]);
  const next = (valus: any) => {
    console.log(valus);
  };
  const formSubmit = (valus: any) => {
    form
      .validateFields()
      .then((values: any) => {
        console.log(values);
        setCurrentTime(new Date().toLocaleTimeString());
      })
      .catch((err: any) => {
        console.log('校验失败', err);
      });
  };
  //校验开始日期-校验结束日期 -start
  const validityTimeEndChange = (res: any) => {
    const startTime = form.getFieldValue('startTime');
    if (startTime) {
      form.validateFields(['startTime']);
    }
  };
  const validityTimeStartChange = (res: any) => {
    const endTime = form.getFieldValue('endTime');
    if (endTime) {
      form.validateFields(['endTime']);
    }
  };
  const validatorEndTime = (rule: any, value: any, callback: any) => {
    if (!value) {
      callback('请选择!');
    } else {
      const startTime = form.getFieldValue('startTime');
      if (startTime && startTime - value > 0) {
        callback('请选择正确的日期!');
      } else {
        callback();
      }
    }
  };
  const validatorStartTime = (rule: any, value: any, callback: any) => {
    if (!value) {
      callback('请选择!');
    } else {
      const endTime = form.getFieldValue('endTime');
      if (endTime && endTime - value <= 0) {
        callback('请选择正确的日期!');
      } else {
        callback();
      }
    }
  };
  //校验开始日期-校验结束日期 -end
  const onMinChange = (newValue: any) => {
    console.log(newValue);
  };
  const onMaxChange = (newValue: any) => {
    console.log(newValue);
  };
  return (
    <>
      <div className="antdFormBox" style={{ padding: '30px' }}>
        <Form
          form={form}
          name="userInfoForm"
          layout="horizontal"
          labelCol={{
            // xs: { span: 24 }, //屏幕< 576px
            // sm: { span: 5 }, //屏幕>=576px
            md: { span: 6 }, //屏幕>=768px
            // lg: { span: 7 }, //屏幕>=992px
            // xl: { span: 8 }, //屏幕>=1200px
            // xxl: { span: 9 }, //屏幕>=1600px
          }}
          wrapperCol={{
            // xs: { span: 24 }, //屏幕< 576px
            // sm: { span: 19 }, //屏幕>=576px
            md: { span: 16 }, //屏幕>=768px
            // lg: { span: 17 }, //屏幕>=992px
            // xl: { span: 16 }, //屏幕>=1200px
            // xxl: { span: 15 }, //屏幕>=1600px
          }}
          onFinish={next}
        >
          <Form.Item name="name" label="姓名">
            <Input
              title={form.getFieldValue('number')}
              placeholder="请输入姓名"
              maxLength={4}
            ></Input>
          </Form.Item>
          <Form.Item name="age" label="年龄">
            <Input
              title={form.getFieldValue('number')}
              placeholder="请输入年龄"
              maxLength={2}
              onInput={(e: any) => {
                e.target.value = e.target.value.replace(/[^\d]/, '');
              }}
            ></Input>
          </Form.Item>
          <Form.Item name="hobby" label="爱好">
            <Radio.Group
              onChange={(value: any) => {
                console.log(value);
              }}
            >
              <Radio value={1}>敲代码</Radio>
              <Radio value={2}>看抖音</Radio>
              <Radio value={3}>逛京东</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="startTime"
            label="开始时间"
            rules={[{ required: true, validator: validatorStartTime }]}
          >
            <DatePicker placeholder="请选择" onChange={validityTimeStartChange} />
          </Form.Item>
          <Form.Item
            label="结束时间"
            name="endTime"
            rules={[{ required: true, validator: validatorEndTime }]}
          >
            <DatePicker placeholder="请选择" onChange={validityTimeEndChange} />
          </Form.Item>
          <Form.Item label="区间">
            <Input.Group>
              <Form.Item name={['qujian', 'min']} noStyle rules={[{ required: true }]}>
                <InputNumber
                  style={{ width: 100, textAlign: 'center' }}
                  placeholder=">="
                  onChange={onMinChange}
                />
              </Form.Item>
              <SwapRightOutlined style={{ fontSize: 20, color: '#1890ff', marginTop: 4 }} />
              <Form.Item name={['qujian', 'max']} noStyle rules={[{ required: true }]}>
                <InputNumber
                  style={{ width: 100, textAlign: 'center' }}
                  placeholder=">="
                  onChange={onMinChange}
                />
              </Form.Item>
            </Input.Group>
          </Form.Item>
          <Form.Item label="我下边是组件" rules={[{ required: true }]}>
            <CityComponent />
          </Form.Item>
          <Form.Item label="多选全选" name="asdf" rules={[{ required: true }]}>
            <SelectMore
              values={selectMoreValue}
              optionList={optionList}
              placeholder="请选择啊"
              optionValue="code"
              optionName="name"
              selectMoreOnChange={(a: any, b: any) => {
                console.log(a, b);
              }}
              antdProps={{
                bordered: true,
                onClear: () => {
                  console.log('onClear');
                },
              }}
            />
          </Form.Item>
          <div>
            <Button htmlType="submit">form表单自己的submit</Button>
          </div>
        </Form>
        <div>
          <Button type="primary" onClick={formSubmit}>
            手动触发提交
          </Button>
        </div>
        <div>{currentTime}</div>
        <div>{JSON.stringify(form.getFieldsValue())}</div>
      </div>
    </>
  );
};
